<template>
  <div class="order-wrapper">
    <div class="search-container">
      <div class="order-num-container search-item">
        <div class="title">订单编号：</div>
        <el-input v-model="order_no" type="text" placeholder="请输入订单编号" class="input-container" />
      </div>
      <div class="order-num-container search-item">
        <div class="title">联系电话：</div>
        <el-input v-model="phone" type="text" placeholder="请输入联系电话" class="input-container" />
      </div>
      <div class="order-num-container search-item">
        <div class="title">状态：</div>
        <el-select v-model="order_status" placeholder="请选择"><el-option v-for="item in options" :key="item.label" :label="item.value" :value="item.value" /></el-select>
      </div>
      <div class="order-num-container search-item">
        <div class="title">支付方式：</div>
        <el-select v-model="payment" placeholder="请选择"><el-option v-for="item in payOptions" :key="item.label" :label="item.value" :value="item.value" /></el-select>
      </div>
      <div class="order-num-container search-item">
        <div class="title">是否接单：</div>
        <el-select v-model="deal" placeholder="请选择"><el-option v-for="item in dealOptions" :key="item.label" :label="item.value" :value="item.value" /></el-select>
      </div>
      <el-button type="primary" style="height: 36px" icon="el-icon-search" class="search-button" @click="handleSearch">搜索</el-button>
    </div>
    <el-table ref="multipleTable" v-loading="loading" :data="tableData" border tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="order_no" label="订单编号" width="200" />
      <el-table-column v-if="Number(subType) !== 6" prop="order_name" :label="Number(subType) === 1 ? '房型' : '套餐名称'" width="250" :show-overflow-tooltip="true" />
      <el-table-column v-if="Number(subType) === 6" prop="contact_name" label="商品名称" width="200" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>{{ scope.row.order_name }} 等</div>
        </template>
      </el-table-column>
      <el-table-column v-if="Number(subType) === 6" prop="count" label="件数" width="200" />
      <el-table-column v-if="Number(subType) === 1" prop="persons" label="顾客姓名" width="200" />
      <el-table-column prop="reserve_contact_phone" label="联系电话" width="150" />
      <el-table-column v-if="Number(subType) === 1" prop="leave_day" label="预计入住\离店" width="250">
        <template slot-scope="scope">
          <div>{{ scope.row.start_day.substr(0, 10) }} 至 {{ scope.row.leave_day.substr(0, 10) }}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="Number(subType) === 1" prop="arrival_time" label="预计到店时间" width="150" />
      <el-table-column prop="amount" label="金额" width="100" />
      <el-table-column prop="status" label="状态" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" color="#67C23A" style="color:#fff">已支付</el-tag>
          <el-tag v-if="subType === 1 && scope.row.status === 2" color="#409EFF" style="color:#fff">已到店</el-tag>
          <!-- <el-tag v-if="subType !== 1 && scope.row.status === 2" color="#409EFF" style="color:#fff">已到店</el-tag> -->
          <el-tag v-if="subType === 1 && scope.row.status === 3" color="#909399" style="color:#fff">已离店</el-tag>
          <el-tag v-if="subType !== 1 && scope.row.status === 3" color="#909399" style="color:#fff">已核销</el-tag>
          <el-tag v-if="scope.row.status === 4" color="#E6A23C" style="color:#fff">已完成</el-tag>
          <el-tag v-if="scope.row.status === 5" color="#F56C6C" style="color:#fff">售后中</el-tag>
          <el-tag v-if="scope.row.status === 6" color="orange" style="color:#fff">售后已处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payment" label="支付方式" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.payment === 'wepay'" type="success">微信</el-tag>
          <el-tag v-if="scope.row.payment === 'alipay'" type="success">支付宝</el-tag>
          <el-tag v-if="scope.row.payment === 'balance'" type="success">余额</el-tag>
          <el-tag v-if="scope.row.payment === 'deposit'" type="success">储值</el-tag>
          <el-tag v-if="scope.row.payment === 'consume'" type="success">消费额</el-tag>
          <!-- <el-tag v-if="scope.row.payment === 'blessing'" type="success">待反金</el-tag> -->
          <el-tag v-if="scope.row.payment === 'combined'" type="success">组合支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_at" label="创建时间" width="200" />
      <el-table-column fixed="right" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleDetail(scope)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>listQuery.limit" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { orderList } from '@/api/order'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils'
export default {
  name: 'OrderList',
  components: {
    Pagination
  },
  props: {
    type: {
      type: Number,
      default: 0
    },
    subType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      total: 0,
      order_status: '全部',
      deal: '全部',
      payment: '全部',
      order_no: '',
      code: '',
      phone: '',
      options: [
        {
          label: '',
          value: '全部'
        },
        {
          label: 1,
          value: '已支付'
        },
        {
          label: 2,
          value: '已到店'
        },
        {
          label: 3,
          value: '已离店'
        },
        {
          label: 4,
          value: '已完成'
        },
        {
          label: 5,
          value: '售后中'
        },
        {
          label: 6,
          value: '售后已处理'
        }
      ],
      payOptions: [
        {
          label: '',
          value: '全部'
        },
        {
          label: 'wepay',
          value: '微信'
        },
        {
          label: 'alipay',
          value: '支付宝'
        },
        {
          label: 'balance',
          value: '余额'
        },
        {
          label: 'consume',
          value: '消费额'
        },
        // {
        //   label: 'blessing',
        //   value: '待反金'
        // },
        {
          label: 'combined',
          value: '组合支付'
        },
        {
          label: 'deposit',
          value: '储值'
        }
      ],
      dealOptions: [
        {
          label: '',
          value: '全部'
        },
        {
          label: 0,
          value: '未处理'
        },
        {
          label: 1,
          value: '已处理'
        }
      ],
      listQuery: {
        page: 1,
        limit: 10
      },
      list: []
    }
  },
  computed: {
    tableData() {
      return this.list.map((item) => {
        item.create_at = item.create_at ? parseTime(item.create_at) : ''
        return item
      })
    }
  },
  watch: {
    subType: {
      handler: function(type) {
        if (type === 2 || type === 3 || type === 4 || type === 5) {
          this.options = [
            {
              label: '',
              value: '全部'
            },
            {
              label: 1,
              value: '已支付'
            },
            {
              label: 2,
              value: '已接单'
            },
            {
              label: 3,
              value: '已核销'
            },
            {
              label: 4,
              value: '已完成'
            },
            {
              label: 5,
              value: '售后中'
            },
            {
              label: 6,
              value: '售后已处理'
            }
          ]
        } else if (type === 6) {
          this.options = [
            {
              label: '',
              value: '全部'
            },
            {
              label: 1,
              value: '已支付'
            },
            {
              label: 3,
              value: '已核销'
            }
          ]
        }
      },
      immediate: true
    }
  },
  created() {
    this.initList()
  },
  methods: {
    // 分页
    getList(prop) {
      this.listQuery.page = prop.page
      this.listQuery.limit = prop.limit
      this.initList()
    },
    async initList() {
      this.loading = true
      const { type, deal, order_no, order_status, payment, phone, options, payOptions, dealOptions, subType } = this
      const { page, limit } = this.listQuery
      const newOrderStatus = this.transformantClassify(options, order_status).label
      const newPayment = this.transformantClassify(payOptions, payment).label
      const newDeal = this.transformantClassify(dealOptions, deal).label
      const res = await orderList({ type, sub_type: subType, order_no, order_status: newOrderStatus, payment: newPayment, deal: newDeal, phone, page, limit })
      this.loading = false
      const { total, lists } = res.data
      this.total = total
      this.list = lists
    },
    transformantClassify(array, type) {
      return array.find((item, index) => {
        if (item.value === type) {
          return item
        }
      })
    },
    handleSearch() {
      this.initList()
    },
    getType() {
      let name
      const { subType } = this
      switch (subType) {
        case 1:
          name = 'hotel'
          break
        case 2:
          name = 'cate'
          break
        case 3:
          name = 'ktv'
          break
        case 4:
          name = 'scenic'
          break
        case 5:
          name = 'other'
          break
        default:
          name = 'singleOrder'
          break
      }
      return name
    },
    handleDetail(scope) {
      const type = this.getType()
      const { order_no } = scope.row
      this.$router.push({
        path: `/order/${type}/OrderDetail`,
        query: {
          order_no
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-wrapper {
  width: 100%;
  height: 100%;
  .search-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .search-item {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      margin-right: 20px;
      .title {
        width: 80px;
      }
      .input-container{
        width: 200px;
      }
    }
  }
}
</style>
